<template>
  <div @click="showDeptList = false">
    <el-form>
      <el-row>
        <el-col :span="6">
          <el-form-item label-width="40px" label="月份">
            <el-select
              v-model="searchForm.reportDate"
              filterable
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in versionList"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="80px" label="片区/工厂">
            <div class="tree-box">
              <div class="input-wrap">
                <el-input
                  v-model.trim="filterText"
                  class="input-box"
                  placeholder="请选择"
                  clearable
                  @clear="clearTreeSearch"
                  @click.stop="showDeptList = true"
                ></el-input>
              </div>
              <el-tree
                v-show="showDeptList"
                ref="treeRef"
                class="filter-tree"
                :data="deptList"
                :props="defaultProps"
                default-expand-all
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                @node-click="handleChangeDept"
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="search-btn">
          <el-button type="primary" @click="handleSearch">
            <el-icon class="icon-plus"><Search /></el-icon>查询
          </el-button>
          <el-button type="primary" @click="handleReset">重置 </el-button>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin-bottom: 10px">
      <el-button @click="handleExport">导出 </el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="calc(100vh - 300px)"
    >
      <el-table-column type="index" label="序号" width="80" fixed />
      <el-table-column
        prop="projectRegionName"
        label="总部/片区/事业部"
        width="140"
        fixed
      />
      <el-table-column
        prop="factoryList"
        class-name="cus-column"
        label="总部部门/工厂/大区"
        width="220"
        fixed
      >
        <template v-slot="scope">
          <PubColumn
            :data="scope.row.factoryList"
            :columnKey="'projectFactoryName'"
            :height="60"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="项目申报总数"
        width="100"
        prop="factoryList"
        class-name="cus-column"
      >
        <template v-slot="scope">
          <PubObjColumn
            :data="scope.row.factoryList"
            :columnKey="'total.declareCount'"
            :height="60"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="项目申报总金额（万元）"
        width="160"
        prop="factoryList"
        class-name="cus-column"
      >
        <template v-slot="scope">
          <PubObjColumn
            :data="scope.row.factoryList"
            :columnKey="'total.totalMoney'"
            :height="60"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="合同签订总数量"
        width="120"
        prop="factoryList"
        class-name="cus-column"
      >
        <template v-slot="scope">
          <PubColumn
            :data="scope.row.factoryList"
            :columnKey="'sectionNum'"
            :height="60"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="合同签订总金额（万元）"
        width="160"
        prop="factoryList"
        class-name="cus-column"
      >
        <template v-slot="scope">
          <PubColumn
            :data="scope.row.factoryList"
            :columnKey="'sectionAmount'"
            :height="60"
          />
        </template>
      </el-table-column>
      <el-table-column label="集中项目" align="center">
        <el-table-column label="运营保障专项（万元）" align="center">
          <el-table-column
            label="报废更新"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'focus.operate.scrap'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="装备升级"
            width="140"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'focus.operate.deviceUpdate'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="资产调拨"
            width="160"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'focus.operate.assets'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="质量改进"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'focus.operate.quality'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="效率提升"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'focus.operate.efficiency'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="行政办公"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'focus.operate.adminOffice'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="IT设备"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'focus.operate.it'"
                :height="60"
              />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="新产品开发与升级专项（万元）" align="center">
          <el-table-column
            label="新产品配套装备"
            width="220"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'focus.newProduct.newProductEquip'"
                :height="60"
              />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="创新研发专项（万元）" align="center">
          <el-table-column
            label="科技创新"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'focus.innovate.techInnovation'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="装备研发"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'focus.innovate.equipRnD'"
                :height="60"
              />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="EHS专项（万元）" align="center">
          <el-table-column
            label="合规整改"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'focus.ehs.compliance'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="标准化改善"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'focus.ehs.promote'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="节能减排"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'focus.ehs.environment'"
                :height="60"
              />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="金额小计（万元）"
          width="120"
          prop="factoryList"
          class-name="cus-column"
        >
          <template v-slot="scope">
            <PubObjColumn
              :data="scope.row.factoryList"
              :columnKey="'focus.totalMoney'"
              :height="60"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="其中调拨资产金额（万元）"
          width="180"
          prop="factoryList"
          class-name="cus-column"
        >
          <template v-slot="scope">
            <PubObjColumn
              :data="scope.row.factoryList"
              :columnKey="'focus.transferAmount'"
              :height="60"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="占用当年额度金额"
          width="130"
          prop="factoryList"
          class-name="cus-column"
        >
          <template v-slot="scope">
            <PubObjColumn
              :data="scope.row.factoryList"
              :columnKey="'focus.approvalSubTransferAmount'"
              :height="60"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="申报数量"
          prop="factoryList"
          class-name="cus-column"
        >
          <template v-slot="scope">
            <PubObjColumn
              :data="scope.row.factoryList"
              :columnKey="'focus.declareCount'"
              :height="60"
            />
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="临时项目" align="center">
        <el-table-column label="运营保障专项（万元）" align="center">
          <el-table-column
            label="报废更新"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'temp.operate.scrap'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="装备升级"
            width="140"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'temp.operate.deviceUpdate'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="资产调拨"
            width="160"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'temp.operate.assets'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="质量改进"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'temp.operate.quality'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="效率提升"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'temp.operate.efficiency'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="行政办公"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'temp.operate.adminOffice'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="IT设备"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'temp.operate.it'"
                :height="60"
              />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="新产品开发与升级专项（万元）" align="center">
          <el-table-column
            label="新产品配套装备"
            width="220"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'temp.newProduct.newProductEquip'"
                :height="60"
              />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="创新研发专项（万元）" align="center">
          <el-table-column
            label="科技创新"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'temp.innovate.techInnovation'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="装备研发"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'temp.innovate.equipRnD'"
                :height="60"
              />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="EHS专项（万元）" align="center">
          <el-table-column
            label="合规整改"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'temp.ehs.compliance'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="标准化改善"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'temp.ehs.promote'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="节能减排"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'temp.ehs.environment'"
                :height="60"
              />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="金额小计（万元）"
          width="120"
          prop="factoryList"
          class-name="cus-column"
        >
          <template v-slot="scope">
            <PubObjColumn
              :data="scope.row.factoryList"
              :columnKey="'temp.totalMoney'"
              :height="60"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="其中调拨资产金额（万元）"
          width="180"
          prop="factoryList"
          class-name="cus-column"
        >
          <template v-slot="scope">
            <PubObjColumn
              :data="scope.row.factoryList"
              :columnKey="'temp.transferAmount'"
              :height="60"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="占用当年额度金额"
          width="130"
          prop="factoryList"
          class-name="cus-column"
        >
          <template v-slot="scope">
            <PubObjColumn
              :data="scope.row.factoryList"
              :columnKey="'temp.approvalSubTransferAmount'"
              :height="60"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="申报数量"
          prop="factoryList"
          class-name="cus-column"
        >
          <template v-slot="scope">
            <PubObjColumn
              :data="scope.row.factoryList"
              :columnKey="'temp.declareCount'"
              :height="60"
            />
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="合计" align="center">
        <el-table-column label="运营保障专项（万元）" align="center">
          <el-table-column
            label="报废更新"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'total.operate.scrap'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="装备升级"
            width="140"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'total.operate.deviceUpdate'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="资产调拨"
            width="160"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'total.operate.assets'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="质量改进"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'total.operate.quality'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="效率提升"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'total.operate.efficiency'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="行政办公"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'total.operate.adminOffice'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="IT设备"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'total.operate.it'"
                :height="60"
              />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="新产品开发与升级专项（万元）" align="center">
          <el-table-column
            label="新产品配套装备"
            width="220"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'total.newProduct.newProductEquip'"
                :height="60"
              />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="创新研发专项（万元）" align="center">
          <el-table-column
            label="科技创新"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'total.innovate.techInnovation'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="装备研发"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'total.innovate.equipRnD'"
                :height="60"
              />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="EHS专项（万元）" align="center">
          <el-table-column
            label="合规整改"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'total.ehs.compliance'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="标准化改善"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'total.ehs.promote'"
                :height="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="节能减排"
            width="120"
            prop="factoryList"
            class-name="cus-column"
          >
            <template v-slot="scope">
              <PubObjColumn
                :data="scope.row.factoryList"
                :columnKey="'total.ehs.environment'"
                :height="60"
              />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="其中调拨资产金额（万元）"
          width="180"
          prop="factoryList"
          class-name="cus-column"
        >
          <template v-slot="scope">
            <PubObjColumn
              :data="scope.row.factoryList"
              :columnKey="'total.transferAmount'"
              :height="60"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="占用当年额度金额"
          width="130"
          prop="factoryList"
          class-name="cus-column"
        >
          <template v-slot="scope">
            <PubObjColumn
              :data="scope.row.factoryList"
              :columnKey="'total.approvalSubTransferAmount'"
              :height="60"
            />
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="项目投资附加费统计" align="center">
        <el-table-column
          label="投资附加费数量"
          width="120"
          prop="factoryList"
          class-name="cus-column"
        >
          <template v-slot="scope">
            <PubColumn
              :data="scope.row.factoryList"
              :columnKey="'surChargeNum'"
              :height="60"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="投资附加费金额（万元）"
          width="160"
          prop="factoryList"
          class-name="cus-column"
        >
          <template v-slot="scope">
            <PubColumn
              :data="scope.row.factoryList"
              :columnKey="'surChargeAmount'"
              :height="60"
            />
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import PubColumn from "./_help";
import PubObjColumn from "./_helpObj";
import { getDeptTreeByPro } from "/@/api/projects";
import { getReportDate, costList } from "/@/api/reportManager";
import { exportExcel } from "/@/utils/file";
import { ref, onMounted, watch, watchEffect } from "vue";
import { ElTree } from "element-plus";

const searchForm = ref({
  projectFactoryCode: "",
  reportDate: ""
});

const defaultProps = {
  children: "children",
  label: "deptDescShrt",
  disabled: "false"
};

const props = defineProps({
  activeYear: {
    type: String,
    default: ""
  },
  activeName: {
    type: String,
    default: ""
  }
});

watchEffect(() => {
  if (props.activeName === "second" && props.activeYear) {
    queryReportDate();
  }
});

const showDeptList = ref(false);

const filterText = ref("");
const treeRef = ref<InstanceType<typeof ElTree>>();
watch(filterText, val => {
  treeRef.value!.filter(val);
});

onMounted(() => {
  getDeptTreeFunc();
});

// 清空片区
const clearTreeSearch = () => {
  filterText.value = "";
  searchForm.value.projectFactoryCode = "";
  showDeptList.value = false;
};

// 选中片区
const handleChangeDept = node => {
  filterText.value = node.deptDescShrt;
  searchForm.value.projectFactoryCode = node.id;
  showDeptList.value = false;
};

// 过滤片区
const filterNode = (value: string, data) => {
  if (!value) return true;
  return data.deptDescShrt.includes(value);
};

// 获取工厂区域
const deptList = ref([]);
const getDeptTreeFunc = async () => {
  try {
    const { data } = await getDeptTreeByPro({});
    deptList.value = data || [];
  } catch (err) {
    console.log(err);
  }
};

// 获取版本
const versionList = ref([]);
const queryReportDate = async () => {
  const { data } = await getReportDate({ projectYear: props.activeYear });
  versionList.value = data || [];
  searchForm.value.reportDate = data[0];
  queryList();
};

// 搜索
const handleSearch = () => {
  queryList();
};

// 重置
const handleReset = () => {
  searchForm.value = {
    projectFactoryCode: "",
    reportDate: versionList.value[0]
  };
  filterText.value = "";
};

// 获取列表
const tableData = ref([]);
const queryList = async () => {
  const params = {
    projectYear: props.activeYear,
    ...searchForm.value
  };
  const { data } = await costList(params);
  tableData.value = data || [];
};

// 导出数据
const handleExport = () => {
  const name = `B类项目费用汇总`;
  const data = {
    projectYear: props.activeYear,
    ...searchForm.value
  };
  exportExcel("/snow-admin//thdReportMonth/exportCostReport", data, name);
};
</script>
<style scoped lang="scss">
.tree-box {
  position: relative;
  width: 100%;
  .input-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 8px;
    padding-right: 6px;
  }
  &:deep {
    .input-box {
      .el-input__inner {
        height: 32px;
        line-height: 32px;
        font-size: 12px;
        border: 1px solid #e4e8f2;
        padding: 4px 8px;
      }
    }
  }
}
.filter-tree:deep {
  &.el-tree {
    width: 100%;
    max-height: 552px;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid #e4e8f2;
    border-radius: 8px;
    z-index: 10;
    font-weight: normal;
    font-size: 12px;
    position: absolute;
    .el-tree-node > .el-tree-node__children {
      overflow: visible;
    }
  }
}
::v-deep .cus-column {
  padding: 0 !important;
  .cell {
    padding: 0 !important;
  }

  .contract-list-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .contract-list {
    width: 100%;
    padding: 6px;
    padding: 6px;
    border-bottom: 1px solid #e4e8f2;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  .no-border {
    border-bottom: none;
  }
}
</style>
